import React, { useState } from 'react';
import style from './index.module.css';
import GaodingTopcen from '../../components/GaodingTopcen/index';

function Index() {
    const [hoveredItem, setHoveredItem] = useState(null);

    const handleMouseEnter = (index) => {
        setHoveredItem(index);
    };

    const handleMouseLeave = () => {
        setHoveredItem(null);
    };

    // 定义下拉内容
    const dropdownContent = [
        {
            // title: '产品详细信息',
            description: <GaodingTopcen></GaodingTopcen>,
        },
        {
            // title: '解决方案详细信息',
            // description: '这里是关于解决方案的详细信息。',
        },
        null, // 其他项没有下拉内容
        null,
        null,
    ];

    return (
        <div className={style.top}>
            <div className={style.top_left}>
                <span className={style.logo}>稿定</span>
                <ul>
                    {['产品∨', '解决方案∨', '开放平台', '渠道合作', '了解稿定'].map((item, index) => (
                        <li
                            key={index}
                            onMouseEnter={() => handleMouseEnter(index)}
                            onMouseLeave={handleMouseLeave}
                        >
                            {item}
                            {(index === 0 || index === 1) && dropdownContent[index] && (
                                <div className={`${style.dropdown} ${hoveredItem === index? style.visible : ''}`}>
                                    <h2>{dropdownContent[index].title}</h2>
                                    <div>{dropdownContent[index].description}</div>
                                </div>
                            )}
                        </li>
                    ))}
                </ul>
            </div>
        </div>
    );
}

export default Index;